<template>
  <div>
    <Dog
      v-for="(obj, index) in list"
      :key="index"
      :imgurl="obj.dogImgUrl"
      :dogname="obj.dogName"
      @love="fn"
    ></Dog>

    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import Dog from "./components/Dogs1.vue";
export default {
  data() {
    return {
      // 1. 准备数据
       list : [
    {
        dogImgUrl:
        "https://i02piccdn.sogoucdn.com/9ab94b6efe90e572",
        dogName: "雪山送别",
    },
    {
        dogImgUrl:
        "https://i03piccdn.sogoucdn.com/a63ee69cae7adc13",
        dogName: "情书",
    },
    {
        dogImgUrl:
        "https://i04piccdn.sogoucdn.com/ddbcac4d8070416d",
        dogName: "call me by your name",
    },
    {
        dogImgUrl:
        "https://i02piccdn.sogoucdn.com/7f1a2b73d31c2c9c",
        dogName: "爱宇日俱增",
    },
    {
        dogImgUrl:
        "https://i03piccdn.sogoucdn.com/1d1175484fb2fcec",
        dogName: "有害诗篇",
    },
    {
        dogImgUrl:
        "https://i02piccdn.sogoucdn.com/59fc4494f2b3cc79",
        dogName: "定情作",
    },
],
      loveArr: []
    };
  },
  components: {
    Dog,
  },
  methods: {
    fn(dogName) {
      this.loveArr.push(dogName)
    },
  },
};
</script>

<style >
</style>